<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图书管理V3</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }

        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: #F3DCAB;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }

        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <label for="id">
                            编号：
                        </label>
                        <input type="text" id="id" v-model='id' :disabled='flag' v-focus>
                        <label for="name">
                            名称：
                        </label>
                        <input type="text" id="name" v-model.lazy='name'>
                        <button @click.prevent='addBooks' :disabled='subflag'>提交</button>
                    </div>
                </div>
            </div>
            <div class="total">
                <span>图书总数：</span>
                <span>{{total}}</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,i) in books'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{date | datefrm('yyyy-MM-dd hh:mm:ss')}}</td>
                        <td>
                            <a href="" @click.prevent='editBooks(i)'>修改</a>
                            <span>|</span>
                            <a href="" @click.prevent='delBooks(i)'>删除</a>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script src="js/time.js"></script>
    <script type="text/javascript">
        //   需求(步骤):
        // 1.渲染表单数据,页面dom加载之前(created)就渲染,默认第一个输入框获取焦点;统计书本数量;格式化时间;
        // 2.添加按钮操作(通过输入框添加数据到页面);删除按钮操作;
        // 3.编辑按钮操作;添加的书本名称不能重复;
        Vue.directive('focus', {
            inserted(el) {
                el.focus();
            }
        })
        //日期格式化
        Vue.filter('datefrm', function (date, fm) {
            return dateFormat(date, fm)
        })
        var vm = new Vue({
            el: '#app',
            data: {
                id: '5',
                name: '隋唐2',
                flag: false, //控制是否是修改操作
                subflag: false, //控制书名是否重名,重名不能提交
                books: [],
                date: new Date
            },
            created: function () {
                setTimeout(() => {
                    var data = [{
                        id: 1,
                        name: '三国演义',
                        date: ''
                    }, {
                        id: 2,
                        name: '水浒传',
                        date: ''
                    }, {
                        id: 3,
                        name: '红楼梦',
                        date: ''
                    }, {
                        id: 4,
                        name: '西游记',
                        date: ''
                    }];
                    this.books = data;
                }, 500);
            },
            methods: {
                addBooks() {
                    if (this.name != '') {
                        if (this.flag) {
                            // 修改操作过来的数据:通过id找到是数组索引
                            var index = this.books.findIndex(item => item.id == this.id);
                            console.log(index);

                            this.books[index].name = this.name;
                            this.flag = false;
                        } else {
                            // 用户直接输入的数据
                            this.books.push({
                                id: this.id,
                                name: this.name,
                            })
                        }

                    }

                    // 清空表单
                    this.id = this.name = ''
                },
                delBooks(i) {
                    this.books.splice(i, 1);
                },
                editBooks(i) {
                    this.id = this.books[i].id;
                    this.name = this.books[i].name;
                    this.flag = true;
                }
            },
            computed: {
                total() {
                    return this.books.length
                }
            },
            watch: {
                name: function (val) {
                    this.subflag = this.books.some(item => this.name == item.name);
                    if (this.subflag) {
                        console.log('用户名重复')
                    } else {
                        console.log('名字ok')
                    }
                }
            }
        });
    </script>
</body>

</html>